<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('列表上方的操作区域插槽')}`">{{ $t('列表上方的操作区域插槽') }}</t>
            <li>
                在查询模块与列表模块之间存在一个名为
                <span class="s-code">"operation-container"</span>
                的插槽，可用于放置一些操作按钮。其参数为
                <span class="s-code">{ data, selections, searchParams }</span>；即列表的数据、当前已勾选的数据行、以及列表当前页的查询参数
            </li>
        </template>
        <sib-table
            :index-config="indexConfig"
            :search-config="searchConfig"
            :table-column="tableColumn"
            :table-data="tableData">
            <template #operation-container="{ selections, searchParams }">
                <el-button type="primary" @click="handleExport(searchParams)">导出数据</el-button>
                <el-button type="primary" @click="handleDelete(selections)">批量删除</el-button>
            </template>
        </sib-table>
    </example>
</template>

<script>
/* eslint-disable no-console */
import { ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';

export default {
    setup() {
        const tableData = ref(Array(8).fill().map((_, i) => ({
            id: i + 1,
            name: `张三${i + 1}号`,
            sex: i % 2 ? '男' : '女',
            status: '未婚',
            age: i + 20,
        })));

        return {
            indexConfig: { type: 'selection' },
            tableColumn: [
                { label: '姓名', code: 'name' },
                { label: '性别', code: 'sex' },
                { label: '年龄', code: 'age' },
                { label: '身高', code: 'height' },
                { label: '状态', code: 'status' },
            ],
            searchConfig: {
                fields: [
                    {
                        label: '姓名',
                        code: 'name',
                        type: 'text',
                        maxlength: 30,
                    },
                    {
                        label: '性别',
                        code: 'sex',
                        type: 'select',
                        options: [
                            { value: '女', label: '女' },
                            { value: '男', label: '男' },
                        ],
                    },
                ],
            },
            tableData,
            handleExport(searchParams) {
                // eslint-disable-next-line
                console.log('searchParams: ', searchParams);
            },
            handleDelete(selections) {
                // eslint-disable-next-line
                console.log('selections: ', selections);
                if (!selections.length) {
                    ElMessage({ type: 'warning', message: '请至少选择一条数据' });
                    return;
                }
                ElMessageBox.confirm('请确认是否删除?', '温馨提示').catch(() => {});
            },
            templateString: `<template>
    <div class="example-box">
        <sib-table
            :index-config="indexConfig"
            :search-config="searchConfig"
            :table-column="tableColumn"
            :table-data="tableData">
            <template #operation-container="{ selections, searchParams }">
                <el-button type="primary" @click="handleExport(searchParams)">导出数据</el-button>
                <el-button type="primary" @click="handleDelete(selections)">批量删除</el-button>
            </template>
        </sib-table>
    </div>
</template>

<script>
export default {
    setup() {
        const tableData = ref(Array(8).fill().map((_, i) => ({
            id: i + 1,
            name: \`张三\${i + 1}号\`,
            sex: i % 2 ? '男' : '女',
            deposit: 10086 + i * 6666,
            status: '未婚',
            age: i + 20,
        })));

        return {
            indexConfig: { type: 'selection' },
            tableColumn: [
                { label: '姓名', code: 'name' },
                { label: '性别', code: 'sex' },
                { label: '年龄', code: 'age' },
                { label: '身高', code: 'height' },
                { label: '状态', code: 'status' },
            ],
            searchConfig: {
                fields: [
                    {
                        label: '姓名',
                        code: 'name',
                        type: 'text',
                        maxlength: 30,
                    },
                    {
                        label: '性别',
                        code: 'sex',
                        type: 'select',
                        options: [
                            { value: '女', label: '女' },
                            { value: '男', label: '男' },
                        ],
                    },
                ],
            },
            tableData,
            handleExport(searchParams) {
                console.log('searchParams: ', searchParams);
            },
            handleDelete(selections) {
                console.log('selections: ', selections);
                if (!selections.length) {
                    ElMessage({ type: 'warning', message: '请至少选择一条数据' });
                    return;
                }
                ElMessageBox.confirm('请确认是否删除?', '温馨提示').catch(() => {});
            },
        };
    },
};
<\/script>`,
        };
    },
};
</script>
